<template>
  <div>
    <!--  -->
      <van-nav-bar
        title="我的关注"
        left-arrow
        @click-left="$router.back()"
        @click-right="$router.push({path:'/'})"
      >
         <template #right>
           <van-icon name="wap-home-o" color="red" size="6vw" />
         </template>
      </van-nav-bar>
      <!--  -->
      <div class="list" >
        <div class="item" v-for="(item,index) in follows" :key="item.id">
          <van-image
            class="avatar"
            :src="item.head_img|imgUrl"
        />
        <div class="info">
          <h4 class="username">{{item.nickname}}</h4>
          <p class="date">{{item.create_date|formatDate}}</p>
        </div>
        <div class="btn" :class="{danger:!item.isFollow}"  @click="followsBrn(item.id,index)">{{item.isFollow?'取消关注':'添加关注'}}</div>
      </div>
        </div>
        
  </div>
</template>

<script>
import {getUserFollowsAPI,userUnFollowsByAPI,userFollowsByAPI} from "../apis/user"
export default {
  data () {
    return {
      follows: [],
    }
  },
    async created () {
      const res= await getUserFollowsAPI()
      console.log(res)
      this.follows=res.data.data.map((item)=>{
        return {...item,isFollow:true}
      })
    },
    methods: {
      //  console.log("用户的id", id, index);
      async followsBrn(id , index){
        // console.log(this.follows[index])
        const {isFollow} =this.follows[index];
        if(isFollow){
            const res = await userUnFollowsByAPI(id)
        }else{
            const res = await userFollowsByAPI(id)
        }
        // 改变关注状态
        // console.log(this.follows[index].isFollow)
        this.follows[index].isFollow=!this.follows[index].isFollow
        // console.log(this.follows[index].isFollow)
        
      }
    }
}
</script>

<style lang="less" scoped>
.list{
  .item{
    height:80px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgb(206, 204, 204);
    padding: 0 20px;
    .avatar{
      width: 40px;
      height: 40px;
    }
    .info{
      flex: 1;
      margin-left: 20px;
      .username{
        font-size: 16px;
      }
      .data{
        font-size:13px;
        margin-top: 5px;
        color:#666;
      }
    }
    .btn{
      width:75px;
      height:25px;
      line-height: 25px;
      text-align: center;
      background-color: #e1e1e1;
      border-radius: 50px;
      font-size:12px;
    }
    .danger {
      background-color: red;
      color: #fff;
    }
  }
}
</style>